<template>
  <div>
    <el-form :model="queryParam" :inline=true style="display: flex">
      <el-form-item label="名字">
        <el-input v-model="queryParam.name" style="width:160px"/>
      </el-form-item>
      <el-form-item label="类型">
        <el-input v-model="queryParam.code" style="width:160px"/>
      </el-form-item>
      <el-form-item label="json">
        <el-input v-model="queryParam.json" style="width:160px"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryPage">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleAddOrUpdate(true,null)">新建策略</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" stripe style="width: 100%;height: 100%;overflow-y: auto;">
      <el-table-column prop="id" label="序号" width="80"></el-table-column>
      <el-table-column prop="name" label="名字" width="120"></el-table-column>
      <el-table-column prop="code" label="类型" width="200"></el-table-column>
      <el-table-column prop="json" label="json" width="1000">
        <template slot-scope="scope">
          <div class="typeEnter">{{ scope.row.json  | ellipsis }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="descript" label="descript"></el-table-column>
      <el-table-column prop="vars" label="vars"></el-table-column>
      <el-table-column prop="ints" label="ints"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <span>{{ value2Name(statusEnums, scope.row.status) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="时间" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleAddOrUpdate(false,scope.row)" type="text">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pageTotal>0"
      :total="pageTotal"
      :page.sync="queryParam.pageNum"
      :limit.sync="queryParam.pageSize"
      @pagination="queryPage"
    />

    <!--  添加或修改菜单配置对话框-->
    <el-dialog :title="isAdd?'新增策略':'编辑策略'" :visible.sync="open" :show-close=false :fullscreen="true">
      <el-form>
        <!--  if部分-->
        <div>
          <constraint-part :type="ifPart.type" :constraint="ifPart.constraint"></constraint-part>
          <result-part :result="ifPart.result"></result-part>
          <el-select v-model="ifPart.reasonCode" :clearable=true placeholder="选择原因代码">
            <el-option v-for="(item,index) in reasonCodeList"
                       :label="item.name" :key="item.code" :value="item.code"/>
          </el-select>
        </div>

        <!--  else if部分-->
        <div v-if="elseIfPart.length >0" v-for="(item,index) in elseIfPart">
          <constraint-part :type="item.type" :constraint="item.constraint"></constraint-part>
          <result-part :result="item.result"></result-part>
          <el-select v-model="ifPart.reasonCode" placeholder="选择原因代码">
            <el-option v-for="(item,index) in reasonCodeList"
                       :label="item.name" :key="item.code" :value="item.code"/>
          </el-select>
        </div>


        <div>
          <el-button type="warning" @click="handleAddElseif()">插入else if</el-button>
        </div>

        <!--  else部分-->
        <div>
          <result-part :result="elsePart.result"></result-part>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {value2Name, ellipsis, parseTime} from "../../../utils";
import store from "../../../store";
import constraintPart from "../../../components/condition/constraintPart.vue";
import resultPart from "../../../components/condition/resultPart.vue";

export default {
  components: {
    resultPart, constraintPart
  },
  data() {
    return {
      // 编辑的窗口
      open: false,
      isAdd: false,
      form: {},

      // 查询参数
      pageTotal: 0,
      queryParam: {
        strategyName: '',
        strategyType: '',
        strategyJson: '',
        pageNum: 1,
        pageSize: 10
      },

      //数据结构
      ifPart: {type: "if", constraint: [], result: [{}], reasonCode: ''},
      elsePart: {type: "else", result: [{}], reasonCode: ''},
      elseIfPart: [],
      elseIfThen: [],

      leftParam: {
        type: 2
      },
      rightParam: {
        type: 3
      },
      operator: {
        type: 2
      },
      variateList: [],
      reasonCodeList: [],
      methodList: [
        {name: "拼接", value: "concat", num: 2},
        {name: "时间格式化", value: "timeParse", num: 1},
        {name: "转大写", value: "toUp", num: 1}],

      //页面参数
      conditionList: [{ifed: [0], thend: [0], elsed: [0]}],
      radio1: '1',
      radio2: '1',

      defaultProject: store.getJsonItem("defaultProject"),
      statusEnums: store.listDictionary('isShow'),
      tableData: []
    }
  }
  ,
  mounted() {
    this.pageList()
    this.reasonCodePageList()
  }
  ,
  methods: {
    ellipsis,
    parseTime,
    value2Name,
    queryPage() {
      this.pageList()
    }
    ,
    pageList() {
      let _this = this
      this.$api.strategyPageList(_this.queryParam).then(res => {
        if (res.code === '00000') {
          _this.tableData = res.data.pageList
          _this.pageTotal = res.data.pageTotal
        } else {
          _this.$message(res.msg)
        }
      }).catch(e => {
        console.log('接口访问异常!')
      })
    },
    // 添加一个elseif
    handleAddElseif() {
      this.conditionList.push({ifed: [0], thend: [0]})
    },
    // 删除一个elseif
    handleDelElseif(index) {
      this.conditionList.pop(index)
    },


    // 添加一个addCondition
    handleAddCondition(index, item) {
      let tmp = this.conditionList[index];
      tmp['ifed'].push(tmp.length + 1);
    },
    // 删除一个delCondition
    handleDelCondition(index, item) {
      let tmp = this.conditionList[index];
      tmp['ifed'].pop(tmp.length);
    },

    // 添加一个addthen
    handleAddThen(index, then) {
      let tmp = this.conditionList[index];
      tmp['thend'].push(then.length);
    },
    // 添加一个delthen
    handleDelThen(index, tindex) {
      let tmp = this.conditionList[index];
      tmp['thend'].splice(tindex, 1);// 删除下标为2的元素
    },


    // 添加一个addelse
    handleAddElse(index, elsed) {
      let tmp = this.conditionList[index];
      tmp['elsed'].push(elsed.length);
    },
    // 添加一个delelse
    handleDelElse(index, eindex) {
      let tmp = this.conditionList[index];
      tmp['elsed'].splice(eindex, 1);// 删除下标为2的元素
    },

    // 取消按钮
    cancel() {
      this.open = false
    },

    // 打开更新数据窗口
    handleAddOrUpdate(isAdd, row) {
      this.open = true
      this.isAdd = isAdd
      if (isAdd) {
        this.form = {}
      } else {
        this.form = row
      }
    },

    // 保存或者更新
    saveOrUpdate() {
      let _this = this
      let param = {
        name: _this.form.name,
        status: _this.form.status,
      }

      let param2 = []

      param2.push(this.ifPart)
      param2.push(this.elsePart)

      param2.push(this.elseIfPart)
      param2.push(this.elseIfThen)

      console.log(JSON.stringify({then: param2}))

      if (this.isAdd) {
        this.$api.addMenu(param).then(res => {
          if (res.code === '00000') {
            _this.$message('新增成功')
            this.open = false
          } else {
            _this.$message(res.msg)
          }
        }).catch(e => {
          console.log('接口访问异常!')
        })
      } else {
        param.id = _this.form.id
        this.$api.updateMenu(param).then(res => {
          if (res.code === '00000') {
            _this.$message('修改成功')
            this.open = false
          } else {
            _this.$message(res.msg)
          }
        }).catch(e => {
          console.log('接口访问异常!')
        })
      }
    },
    reasonCodePageList() {
      let _this = this
      this.$api.reasonCodePageList({"pageSize": 10000}).then(res => {
        if (res.code === '00000') {
          _this.reasonCodeList = res.data.pageList
        } else {
          _this.$message(res.msg)
        }
      }).catch(e => {
        console.log('接口访问异常!')
      })
    }
  },
  filters: {
    ellipsis: (str) => ellipsis(str, 300)
  }
}
</script>

<style>
.if-then-size {
  line-height: 80px;
  vertical-align: center;
  font-size: 30px;
}
</style>
